<!doctype html>


<html>
<head>
  <link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon">
  <title>ui (Closure Library API Documentation - JavaScript)</title>
  <link rel="stylesheet" href="static/css/base.css">
  <link rel="stylesheet" href="static/css/doc.css">
  <link rel="stylesheet" href="static/css/sidetree.css">
  <link rel="stylesheet" href="static/css/prettify.css">

  <script>
     var _staticFilePath = "static/";
     var _typeTreeName = "goog";
     var _fileTreeName = "Source";
  </script>

  <script src="static/js/doc.js">
  </script>


  <meta charset="utf8">
</head>

<body onload="grokdoc.onLoad();">

<div id="header">
  <div class="g-section g-tpl-50-50 g-split">
    <div class="g-unit g-first">
      <a id="logo" href="index.html">Closure Library API Documentation</a>
    </div>

    <div class="g-unit">
      <div class="g-c">
        <strong>Go to class or file:</strong>
        <input type="text" id="ac">
      </div>
    </div>
  </div>
</div>





<div class="colmask rightmenu">
<div class="colleft">
    <div class="col1">
      <!-- Column 1 start -->

<div id="title">
       <span class="fn">ui</span>
</div>

<hr/>


  <h2>Classes</h2>
 <div class="fn-constructor">
        <a href="class_goog_ui_AbstractSpellChecker.html">
          goog.ui.AbstractSpellChecker</a><br/>
        <div class="class-details">Abstract base class for spell checker editor implementations. Provides basic
functionality such as word lookup and caching.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ActivityMonitor.html">
          goog.ui.ActivityMonitor</a><br/>
        <div class="class-details">Once initialized with a document, the activity monitor can be queried for
the current idle time.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_AdvancedTooltip.html">
          goog.ui.AdvancedTooltip</a><br/>
        <div class="class-details">Advanced tooltip widget with cursor tracking abilities. Works like a regular
tooltip but can track the cursor position and direction to determine if the
tooltip should be dismissed or remain open.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_AnimatedZippy.html">
          goog.ui.AnimatedZippy</a><br/>
        <div class="class-details">Zippy widget. Expandable/collapsible container, clicking the header toggles
the visibility of the content.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_AttachableMenu.html">
          goog.ui.AttachableMenu</a><br/>
        <div class="class-details">An implementation of a menu that can attach itself to DOM element that
are annotated appropriately.

The following attributes are used by the AttachableMenu

menu-item - Should be set on DOM elements that function as items in the
menu that can be selected.
classNameSelected - A class that will be added to the element's class names
when the item is selected via keyboard or mouse.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_BaseRoundedPanel.html">
          goog.ui.BaseRoundedPanel</a><br/>
        <div class="class-details">Base class for the hierarchy of RoundedPanel classes. Do not
instantiate directly. Instead, call goog.ui.RoundedPanel.create().
The HTML structure for the RoundedPanel is:
<pre class="lang-js prettyprint">
- div (Contains the background and content. Class name: goog-roundedpanel)
- div (Contains the background/rounded corners. Class name:
goog-roundedpanel-bg)
- div (Contains the content. Class name: goog-roundedpanel-content)
</pre></div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_BidiInput.html">
          goog.ui.BidiInput</a><br/>
        <div class="class-details">Default implementation of BidiInput.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Bubble.html">
          goog.ui.Bubble</a><br/>
        <div class="class-details">The Bubble provides a general purpose bubble implementation that can be
anchored to a particular element and displayed for a period of time.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Button.html">
          goog.ui.Button</a><br/>
        <div class="class-details">A button control, rendered as a native browser button by default.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ButtonRenderer.html">
          goog.ui.ButtonRenderer</a><br/>
        <div class="class-details">Default renderer for goog.ui.Buttons.  Extends the superclass with
the following button-specific API methods:
<ul>
<li><code>getValue</code> - returns the button element&amp;#39;s value
<li><code>setValue</code> - updates the button element to reflect its new value
<li><code>getTooltip</code> - returns the button element&amp;#39;s tooltip text
<li><code>setTooltip</code> - updates the button element&amp;#39;s tooltip text
<li><code>setCollapsed</code> - removes one or both of the button element&amp;#39;s
borders
</li></li></li></li></li></ul>
For alternate renderers, see goog.ui.NativeButtonRenderer,
goog.ui.CustomButtonRenderer, and goog.ui.FlatButtonRenderer.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_CharCounter.html">
          goog.ui.CharCounter</a><br/>
        <div class="class-details">CharCounter widget. Counts the number of characters in a input field or a
text box and displays the number of additional characters that may be
entered before the maximum length is reached.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_CharPicker.html">
          goog.ui.CharPicker</a><br/>
        <div class="class-details">Character Picker Class. This widget can be used to pick any Unicode
character by traversing a category-subcategory structure or by inputing its
hex value.

See charpicker.html demo for example usage.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_CheckBoxMenuItem.html">
          goog.ui.CheckBoxMenuItem</a><br/>
        <div class="class-details">Class representing a checkbox menu item.  This is just a convenience class
that extends goog.ui.MenuItem by making it checkable.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Checkbox.html">
          goog.ui.Checkbox</a><br/>
        <div class="class-details">3-state checkbox widget. Fires CHECK or UNCHECK events before toggled and
CHANGE event after toggled by user.
The checkbox can also be enabled/disabled and get focused and highlighted.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_CheckboxRenderer.html">
          goog.ui.CheckboxRenderer</a><br/>
        <div class="class-details">Default renderer for goog.ui.Checkboxs.  Extends the superclass
to support checkbox states:</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ColorButton.html">
          goog.ui.ColorButton</a><br/>
        <div class="class-details">A color button control.  Identical to goog.ui.Button, except it
defaults its renderer to goog.ui.ColorButtonRenderer.
This button displays a particular color and is clickable.
It is primarily useful with goog.ui.ColorSplitBehavior to cache the
last selected color.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ColorButtonRenderer.html">
          goog.ui.ColorButtonRenderer</a><br/>
        <div class="class-details">Renderer for goog.ui.ColorButtons.
Uses goog.ui.ColorMenuButtons but disables the dropdown.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ColorMenuButton.html">
          goog.ui.ColorMenuButton</a><br/>
        <div class="class-details">A color menu button control.  Extends goog.ui.MenuButton by adding
an API for getting and setting the currently selected color from a menu of
color palettes.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ColorMenuButtonRenderer.html">
          goog.ui.ColorMenuButtonRenderer</a><br/>
        <div class="class-details">Renderer for goog.ui.ColorMenuButtons.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ColorPalette.html">
          goog.ui.ColorPalette</a><br/>
        <div class="class-details">A color palette is a grid of color swatches that the user can highlight or
select via the keyboard or the mouse.  The selection state of the palette is
controlled by a selection model.  When the user makes a selection, the
component fires an ACTION event.  Event listeners may retrieve the selected
color using the #getSelectedColor method.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ColorPicker.html">
          goog.ui.ColorPicker</a><br/>
        <div class="class-details">Create a new, empty color picker.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ColorSplitBehavior.html">
          goog.ui.ColorSplitBehavior</a><br/>
        <div class="class-details">Constructs a ColorSplitBehavior for combining a color button and a menu.
To use this, provide a goog.ui.ColorButton which will be attached with
a goog.ui.ColorMenuButton (with no caption).
Whenever a color is selected from the ColorMenuButton, it will be placed in
the ColorButton and the user can apply it over and over (by clicking the
ColorButton).
Primary use case - setting the color of text/background in a text editor.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ComboBox.html">
          goog.ui.ComboBox</a><br/>
        <div class="class-details">A ComboBox control.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ComboBoxItem.html">
          goog.ui.ComboBoxItem</a><br/>
        <div class="class-details">Class for combo box items.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Component.html">
          goog.ui.Component</a><br/>
        <div class="class-details">Default implementation of UI component.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Container.html">
          goog.ui.Container</a><br/>
        <div class="class-details">Base class for containers.  Extends goog.ui.Component by adding
the following:
<ul>
<li>a goog.events.KeyHandler, to simplify keyboard handling,
<li>a pluggable <em>renderer</em> framework, to simplify the creation of
containers without the need to subclass this class,
<li>methods to manage child controls hosted in the container,
<li>default mouse and keyboard event handling methods.
</li></li></li></li></ul></div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ContainerRenderer.html">
          goog.ui.ContainerRenderer</a><br/>
        <div class="class-details">Default renderer for goog.ui.Container.  Can be used as-is, but
subclasses of Container will probably want to use renderers specifically
tailored for them by extending this class.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ContainerScroller.html">
          goog.ui.ContainerScroller</a><br/>
        <div class="class-details">Plug-on scrolling behavior for a container.

Use this to style containers, such as pop-up menus, to be scrolling, and
automatically keep the highlighted element visible.

To use this, first style your container with the desired overflow
properties and height to achieve vertical scrolling.  Also, the scrolling
div should have no vertical padding, for two reasons: it is difficult to
compensate for, and is generally not what you want due to the strange way
CSS handles padding on the scrolling dimension.

The container must already be rendered before this may be constructed.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Control.html">
          goog.ui.Control</a><br/>
        <div class="class-details">Base class for UI controls.  Extends goog.ui.Component by adding
the following:
<ul>
<li>a goog.events.KeyHandler, to simplify keyboard handling,
<li>a pluggable <em>renderer</em> framework, to simplify the creation of
simple controls without the need to subclass this class,
<li>the notion of component <em>content</em>, like a text caption or DOM
structure displayed in the component (e.g. a button label),
<li>getter and setter for component content, as well as a getter and
setter specifically for caption text (for convenience),
<li>support for hiding/showing the component,
<li>fine-grained control over supported states and state transition
events, and
<li>default mouse and keyboard event handling.
</li></li></li></li></li></li></li></ul>
This class has sufficient built-in functionality for most simple UI controls.
All controls dispatch SHOW, HIDE, ENTER, LEAVE, and ACTION events on show,
hide, mouseover, mouseout, and user action, respectively.  Additional states
are also supported.  See closure/demos/control.html
for example usage.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ControlRenderer.html">
          goog.ui.ControlRenderer</a><br/>
        <div class="class-details">Default renderer for goog.ui.Controls.  Can be used as-is, but
subclasses of Control will probably want to use renderers specifically
tailored for them by extending this class.  Controls that use renderers
delegate one or more of the following API methods to the renderer:
<ul>
<li><code>createDom</code> - renders the DOM for the component
<li><code>canDecorate</code> - determines whether an element can be decorated
by the component
<li><code>decorate</code> - decorates an existing element with the component
<li><code>setState</code> - updates the appearance of the component based on
its state
<li><code>getContent</code> - returns the component&amp;#39;s content
<li><code>setContent</code> - sets the component&amp;#39;s content
</li></li></li></li></li></li></ul>
Controls are stateful; renderers, on the other hand, should be stateless and
reusable.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_CookieEditor.html">
          goog.ui.CookieEditor</a><br/>
        <div class="class-details">Displays and edits the value of a cookie.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Css3ButtonRenderer.html">
          goog.ui.Css3ButtonRenderer</a><br/>
        <div class="class-details">Custom renderer for goog.ui.Buttons. Css3 buttons can contain
almost arbitrary HTML content, will flow like inline elements, but can be
styled like block-level elements.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Css3MenuButtonRenderer.html">
          goog.ui.Css3MenuButtonRenderer</a><br/>
        <div class="class-details">Custom renderer for goog.ui.MenuButtons. Css3 buttons can contain
almost arbitrary HTML content, will flow like inline elements, but can be
styled like block-level elements.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_CssRoundedPanel.html">
          goog.ui.CssRoundedPanel</a><br/>
        <div class="class-details">RoundedPanel class specifically for browsers that support CSS attributes
for elements with rounded borders (ex. Safari 3.0+, Firefox 3.0+). Do not
instantiate directly. Instead, call goog.ui.RoundedPanel.create().</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_CustomButton.html">
          goog.ui.CustomButton</a><br/>
        <div class="class-details">A custom button control.  Identical to goog.ui.Button, except it
defaults its renderer to goog.ui.CustomButtonRenderer.  One could
just as easily pass <code>goog.ui.CustomButtonRenderer.getInstance()</code> to
the goog.ui.Button constructor and get the same result.  Provided
for convenience.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_CustomButtonRenderer.html">
          goog.ui.CustomButtonRenderer</a><br/>
        <div class="class-details">Custom renderer for goog.ui.Buttons.  Custom buttons can contain
almost arbitrary HTML content, will flow like inline elements, but can be
styled like block-level elements.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_CustomColorPalette.html">
          goog.ui.CustomColorPalette</a><br/>
        <div class="class-details">A custom color palette is a grid of color swatches and a button that allows
the user to add additional colors to the palette</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_DatePicker.html">
          goog.ui.DatePicker</a><br/>
        <div class="class-details">DatePicker widget. Allows a single date to be selected from a calendar like
view.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_DatePickerEvent.html">
          goog.ui.DatePickerEvent</a><br/>
        <div class="class-details">Object representing a date picker event.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Dialog.html">
          goog.ui.Dialog</a><br/>
        <div class="class-details">Class for showing simple dialog boxes.
The Html structure of the dialog box is:
<pre class="lang-js prettyprint">
Element         Function                Class-name, modal-dialog = default
----------------------------------------------------------------------------
- iframe         Iframe mask              modal-dialog-bg
- div            Background mask          modal-dialog-bg
- div            Dialog area              modal-dialog
- div        Title bar                modal-dialog-title
- span                             modal-dialog-title-text
- text  Title text               N/A
- span                             modal-dialog-title-close
- ??    Close box                N/A
- div        Content area             modal-dialog-content
- ??      User specified content   N/A
- div        Button area              modal-dialog-buttons
- button                           N/A
- button
- ...
</pre></div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_DimensionPicker.html">
          goog.ui.DimensionPicker</a><br/>
        <div class="class-details">A dimension picker allows the user to visually select a row and column
count using their mouse and keyboard.

The currently selected dimension is controlled by an ACTION event.  Event
listeners may retrieve the selected item using the
#getValue method.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_DimensionPickerRenderer.html">
          goog.ui.DimensionPickerRenderer</a><br/>
        <div class="class-details">Default renderer for goog.ui.DimensionPickers.  Renders the
palette as two divs, one with the un-highlighted background, and one with the
highlighted background.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_DragDropDetector.html">
          goog.ui.DragDropDetector</a><br/>
        <div class="class-details">Creates a new drag and drop detector.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_DrilldownRow.html">
          goog.ui.DrilldownRow</a><br/>
        <div class="class-details">Builds a DrilldownRow component, which can overlay a tree
structure onto sections of an HTML table.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_FilterObservingMenuItem.html">
          goog.ui.FilterObservingMenuItem</a><br/>
        <div class="class-details">Class representing a filter observing menu item.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_FilterObservingMenuItemRenderer.html">
          goog.ui.FilterObservingMenuItemRenderer</a><br/>
        <div class="class-details">Default renderer for goog.ui.FilterObservingMenuItems. Each item has
the following structure:
<div class="goog-filterobsmenuitem"><div>...(content)...</div></div></div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_FilteredMenu.html">
          goog.ui.FilteredMenu</a><br/>
        <div class="class-details">Filtered menu class.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_FlatButtonRenderer.html">
          goog.ui.FlatButtonRenderer</a><br/>
        <div class="class-details">Flat renderer for goog.ui.Buttons.  Flat buttons can contain
almost arbitrary HTML content, will flow like inline elements, but can be
styled like block-level elements.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_FlatMenuButtonRenderer.html">
          goog.ui.FlatMenuButtonRenderer</a><br/>
        <div class="class-details">Flat Menu Button renderer. Creates a simpler version of
goog.ui.MenuButton that doesn&amp;#39;t look like a button and
doesn&amp;#39;t have rounded corners. Uses just a <div> and looks more like
a traditional <select> element.</select></div></div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_FormPost.html">
          goog.ui.FormPost</a><br/>
        <div class="class-details">Creates a formpost object.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Gauge.html">
          goog.ui.Gauge</a><br/>
        <div class="class-details">A UI component that displays a gauge.
A gauge displayes a current value within a round axis that represents a
given range.
The gauge is built from an external border, and internal border inside it,
ticks and labels inside the internal border, and a needle that points to
the current value.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_GaugeColoredRange.html">
          goog.ui.GaugeColoredRange</a><br/>
        <div class="class-details">Information on how to decorate a range in the gauge.
This is an internal-only class.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_GaugeTheme.html">
          goog.ui.GaugeTheme</a><br/>
        <div class="class-details">A class for the default color theme for a Gauge.
Users can extend this class to provide a custom color theme, and apply the
custom color theme by calling  goog.ui.Gauge#setTheme.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_GraphicsRoundedPanel.html">
          goog.ui.GraphicsRoundedPanel</a><br/>
        <div class="class-details">RoundedPanel class that uses goog.graphics to create the rounded corners.
Do not instantiate directly. Instead, call goog.ui.RoundedPanel.create().</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_HoverCard.html">
          goog.ui.HoverCard</a><br/>
        <div class="class-details">Create a hover card object.  Hover cards extend tooltips in that they don&amp;#39;t
have to be manually attached to each element that can cause them to display.
Instead, you can create a function that gets called when the mouse goes over
any element on your page, and returns whether or not the hovercard should be
shown for that element.

Alternatively, you can define a map of tag names to the attribute name each
tag should have for that tag to trigger the hover card.  See example below.

Hovercards can also be triggered manually by calling
<code>triggerForElement</code>, shown without a delay by calling
<code>showForElement</code>, or triggered over other elements by calling
<code>attach</code>.  For the latter two cases, the application is responsible
for calling <code>detach</code> when finished.

HoverCard objects fire a TRIGGER event when the mouse moves over an element
that can trigger a hovercard, and BEFORE_SHOW when the hovercard is
about to be shown.  Clients can respond to these events and can prevent the
hovercard from being triggered or shown.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_HsvPalette.html">
          goog.ui.HsvPalette</a><br/>
        <div class="class-details">Creates an HSV palette. Allows a user to select the hue, saturation and
value/brightness.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_HsvaPalette.html">
          goog.ui.HsvaPalette</a><br/>
        <div class="class-details">Creates an HSVA palette. Allows a user to select the hue, saturation,
value/brightness and alpha/opacity.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_IdGenerator.html">
          goog.ui.IdGenerator</a><br/>
        <div class="class-details">Creates a new id generator.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_IdleTimer.html">
          goog.ui.IdleTimer</a><br/>
        <div class="class-details">Event target that will give notification of state changes between active and
idle. This class is designed to require few resources while the user is
active.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_IframeMask.html">
          goog.ui.IframeMask</a><br/>
        <div class="class-details">Controller for an iframe mask. The mask is only valid in the current
document, or else the document of the given DOM helper.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ImagelessButtonRenderer.html">
          goog.ui.ImagelessButtonRenderer</a><br/>
        <div class="class-details">Custom renderer for goog.ui.Buttons. Imageless buttons can contain
almost arbitrary HTML content, will flow like inline elements, but can be
styled like block-level elements.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ImagelessMenuButtonRenderer.html">
          goog.ui.ImagelessMenuButtonRenderer</a><br/>
        <div class="class-details">Custom renderer for goog.ui.MenuButtons. Imageless buttons can
contain almost arbitrary HTML content, will flow like inline elements, but
can be styled like block-level elements.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_InputDatePicker.html">
          goog.ui.InputDatePicker</a><br/>
        <div class="class-details">Input date picker widget.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ItemEvent.html">
          goog.ui.ItemEvent</a><br/>
        <div class="class-details">Generic ui event class for events that take a single item like a menu click
event.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_KeyboardShortcutEvent.html">
          goog.ui.KeyboardShortcutEvent</a><br/>
        <div class="class-details">Object representing a keyboard shortcut event.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_KeyboardShortcutHandler.html">
          goog.ui.KeyboardShortcutHandler</a><br/>
        <div class="class-details">Component for handling keyboard shortcuts. A shortcut is registered and bound
to a specific identifier. Once the shortcut is triggered an event is fired
with the identifier for the shortcut. This allows keyboard shortcuts to be
customized without modifying the code that listens for them.

Supports keyboard shortcuts triggered by a single key, a stroke stroke (key
plus at least one modifier) and a sequence of keys or strokes.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_LabelInput.html">
          goog.ui.LabelInput</a><br/>
        <div class="class-details">This creates the label input object.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_LinkButtonRenderer.html">
          goog.ui.LinkButtonRenderer</a><br/>
        <div class="class-details">Link renderer for goog.ui.Buttons.  Link buttons can contain
almost arbitrary HTML content, will flow like inline elements, but can be
styled like block-level elements.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Menu.html">
          goog.ui.Menu</a><br/>
        <div class="class-details">A basic menu class.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_MenuBarRenderer.html">
          goog.ui.MenuBarRenderer</a><br/>
        <div class="class-details">Default renderer for goog.ui.menuBars, based on goog.ui.ContainerRenderer.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_MenuBase.html">
          goog.ui.MenuBase</a><br/>
        <div class="class-details">The MenuBase class provides an abstract base class for different
implementations of menu controls.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_MenuButton.html">
          goog.ui.MenuButton</a><br/>
        <div class="class-details">A menu button control.  Extends goog.ui.Button by composing a button
with a dropdown arrow and a popup menu.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_MenuButtonRenderer.html">
          goog.ui.MenuButtonRenderer</a><br/>
        <div class="class-details">Renderer for goog.ui.MenuButtons.  This implementation overrides
goog.ui.CustomButtonRenderer#createButton to create a separate
caption and dropdown element.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_MenuHeader.html">
          goog.ui.MenuHeader</a><br/>
        <div class="class-details">Class representing a menu header.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_MenuHeaderRenderer.html">
          goog.ui.MenuHeaderRenderer</a><br/>
        <div class="class-details">Renderer for menu headers.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_MenuItem.html">
          goog.ui.MenuItem</a><br/>
        <div class="class-details">Class representing an item in a menu.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_MenuItemRenderer.html">
          goog.ui.MenuItemRenderer</a><br/>
        <div class="class-details">Default renderer for goog.ui.MenuItems.  Each item has the following
structure:
<pre class="lang-js prettyprint">
<div class="goog-menuitem">
<div class="goog-menuitem-content">
...(menu item contents)...
</div>
</div>
</pre></div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_MenuRenderer.html">
          goog.ui.MenuRenderer</a><br/>
        <div class="class-details">Default renderer for goog.ui.Menus, based on goog.ui.ContainerRenderer.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_MenuSeparator.html">
          goog.ui.MenuSeparator</a><br/>
        <div class="class-details">Class representing a menu separator.  A menu separator extends goog.ui.Separator by always setting its renderer to goog.ui.MenuSeparatorRenderer.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_MenuSeparatorRenderer.html">
          goog.ui.MenuSeparatorRenderer</a><br/>
        <div class="class-details">Renderer for menu separators.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_MockActivityMonitor.html">
          goog.ui.MockActivityMonitor</a><br/>
        <div class="class-details">A mock implementation of goog.ui.ActivityMonitor for unit testing. Clients
of this class should override goog.now to return a synthetic time from
the unit test.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ModalPopup.html">
          goog.ui.ModalPopup</a><br/>
        <div class="class-details">Base class for modal popup UI components. This can also be used as
a standalone component to render a modal popup with an empty div.

WARNING: goog.ui.ModalPopup is only guaranteed to work when it is rendered
directly in the 'body' element.

The Html structure of the modal popup is:
<pre class="lang-js prettyprint">
Element         Function              Class-name, goog-modalpopup = default
----------------------------------------------------------------------------
- iframe         Iframe mask           goog-modalpopup-bg
- div            Background mask       goog-modalpopup-bg
- div            Modal popup area      goog-modalpopup
- span           Tab catcher
</pre></div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_NativeButtonRenderer.html">
          goog.ui.NativeButtonRenderer</a><br/>
        <div class="class-details">Renderer for goog.ui.Buttons.  Renders and decorates native HTML
button elements.  Since native HTML buttons have built-in support for many
features, overrides many expensive (and redundant) superclass methods to
be no-ops.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_OfflineInstallDialog.html">
          goog.ui.OfflineInstallDialog</a><br/>
        <div class="class-details">An offline install dialog.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_OfflineInstallDialogScreen.html">
          goog.ui.OfflineInstallDialogScreen</a><br/>
        <div class="class-details">Represents a screen on the dialog. You can create new screens and add them
to the offline install dialog by calling registerScreenType and
setCurrentScreenType.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_OfflineStatusCard.html">
          goog.ui.OfflineStatusCard</a><br/>
        <div class="class-details">A offline status card.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_OfflineStatusComponent.html">
          goog.ui.OfflineStatusComponent</a><br/>
        <div class="class-details">An offline status component.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Option.html">
          goog.ui.Option</a><br/>
        <div class="class-details">Class representing a menu option.  This is just a convenience class that
extends goog.ui.MenuItem by making it selectable.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Palette.html">
          goog.ui.Palette</a><br/>
        <div class="class-details">A palette is a grid of DOM nodes that the user can highlight or select via
the keyboard or the mouse.  The selection state of the palette is controlled
an ACTION event.  Event listeners may retrieve the selected item using the
#getSelectedItem or #getSelectedIndex method.

Use this class as the base for components like color palettes or emoticon
pickers.  Use #setContent to set/change the items in the palette
after construction.  See palette.html demo for example usage.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_PaletteRenderer.html">
          goog.ui.PaletteRenderer</a><br/>
        <div class="class-details">Default renderer for goog.ui.Palettes.  Renders the palette as an
HTML table wrapped in a DIV, with one palette item per cell:

<div class="goog-palette">
<table class="goog-palette-table">
<tbody class="goog-palette-body">
<tr class="goog-palette-row">
<td class="goog-palette-cell">...Item 0...</td>
<td class="goog-palette-cell">...Item 1...</td><td>
...
</td></tr>
<tr class="goog-palette-row"><td>
...
</td></tr>
</tbody>
</table>
</div></div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_PlainTextSpellChecker.html">
          goog.ui.PlainTextSpellChecker</a><br/>
        <div class="class-details">Plain text spell checker implementation.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Popup.html">
          goog.ui.Popup</a><br/>
        <div class="class-details">The Popup class provides functionality for displaying an absolutely
positioned element at a particular location in the window. It's designed to
be used as the foundation for building controls like a menu or tooltip. The
Popup class includes functionality for displaying a Popup near adjacent to
an anchor element.

This works cross browser and thus does not use IE's createPopup feature
which supports extending outside the edge of the brower window.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_PopupBase.html">
          goog.ui.PopupBase</a><br/>
        <div class="class-details">The PopupBase class provides functionality for showing and hiding a generic
container element. It also provides the option for hiding the popup element
if the user clicks outside the popup or the popup loses focus.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_PopupColorPicker.html">
          goog.ui.PopupColorPicker</a><br/>
        <div class="class-details">Popup color picker widget.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_PopupDatePicker.html">
          goog.ui.PopupDatePicker</a><br/>
        <div class="class-details">Popup date picker widget.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_PopupMenu.html">
          goog.ui.PopupMenu</a><br/>
        <div class="class-details">A basic menu class.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ProgressBar.html">
          goog.ui.ProgressBar</a><br/>
        <div class="class-details">This creates a progress bar object.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Prompt.html">
          goog.ui.Prompt</a><br/>
        <div class="class-details">Creates an object that represents a prompt (used in place of javascript's
prompt). The html structure of the prompt is the same as the layout for
dialog.js except for the addition of a text box which is placed inside the
"Content area" and has the default class-name 'modal-dialog-userInput'</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_RangeModel.html">
          goog.ui.RangeModel</a><br/>
        <div class="class-details">Creates a range model</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Ratings.html">
          goog.ui.Ratings</a><br/>
        <div class="class-details">A UI Control used for rating things, i.e. videos on Google Video.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_RichTextSpellChecker.html">
          goog.ui.RichTextSpellChecker</a><br/>
        <div class="class-details">Rich text spell checker implementation.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_RoundedTabRenderer.html">
          goog.ui.RoundedTabRenderer</a><br/>
        <div class="class-details">Rounded corner tab renderer for goog.ui.Tabs.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ScrollFloater.html">
          goog.ui.ScrollFloater</a><br/>
        <div class="class-details">Creates a ScrollFloater; see file overview for details.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Select.html">
          goog.ui.Select</a><br/>
        <div class="class-details">A selection control.  Extends goog.ui.MenuButton by composing a
menu with a selection model, and automatically updating the button&amp;#39;s caption
based on the current selection.

Select fires the following events:
CHANGE - after selection changes.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_SelectionMenuButton.html">
          goog.ui.SelectionMenuButton</a><br/>
        <div class="class-details">A selection menu button control.  Extends goog.ui.MenuButton.
Menu contains &amp;#39;select all&amp;#39; and &amp;#39;select none&amp;#39; MenuItems for selecting all and
no items by default. Other MenuItems can be added by user.

The checkbox content fires the action events associated with the &amp;#39;select all&amp;#39;
and &amp;#39;select none&amp;#39; menu items.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_SelectionModel.html">
          goog.ui.SelectionModel</a><br/>
        <div class="class-details">Single-selection model.  Dispatches a goog.events.EventType.SELECT
event when a selection is made.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Separator.html">
          goog.ui.Separator</a><br/>
        <div class="class-details">Class representing a separator.  Although it extends goog.ui.Control,
the Separator class doesn&amp;#39;t allocate any event handlers, nor does it change
its appearance on mouseover, etc.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ServerChart.html">
          goog.ui.ServerChart</a><br/>
        <div class="class-details">Will construct a chart using Google's chartserver.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Slider.html">
          goog.ui.Slider</a><br/>
        <div class="class-details">This creates a slider object.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_SliderBase.html">
          goog.ui.SliderBase</a><br/>
        <div class="class-details">This creates a SliderBase object.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_SplitBehavior.html">
          goog.ui.SplitBehavior</a><br/>
        <div class="class-details">Creates a behavior for combining two controls. The behavior is triggered
by a given event type which applies the behavior handler.
Can be used to also render or decorate  the controls.
For a usage example see goog.ui.ColorSplitBehavior</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_SplitPane.html">
          goog.ui.SplitPane</a><br/>
        <div class="class-details">A left/right up/down Container SplitPane.
Create SplitPane with two goog.ui.Component opjects to split.
TODO(user): Support minimum splitpane size.
TODO(user): Allow component change/orientation after init.
TODO(user): Support hiding either side of handle (plus handle).
TODO(user): Look at setBorderBoxSize fixes and revist borderwidth code.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_SubMenu.html">
          goog.ui.SubMenu</a><br/>
        <div class="class-details">Class representing a submenu that can be added as an item to other menus.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_SubMenuRenderer.html">
          goog.ui.SubMenuRenderer</a><br/>
        <div class="class-details">Default renderer for goog.ui.SubMenus.  Each item has the following
structure:
<div class="goog-submenu">
...(menuitem content)...
<div class="goog-menu">
... (submenu content) ...
</div>
</div></div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Tab.html">
          goog.ui.Tab</a><br/>
        <div class="class-details">Tab control, designed to be hosted in a goog.ui.TabBar.  The tab&amp;#39;s
DOM may be different based on the configuration of the containing tab bar,
so tabs should only be rendered or decorated as children of a tab bar.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_TabBar.html">
          goog.ui.TabBar</a><br/>
        <div class="class-details">Tab bar UI component.  A tab bar contains tabs, rendered above, below,
before, or after tab contents.  Tabs in tab bars dispatch the following
events:
<ul>
<li>goog.ui.Component.EventType.ACTION when activated via the
keyboard or the mouse,
<li>goog.ui.Component.EventType.SELECT when selected, and
<li>goog.ui.Component.EventType.UNSELECT when deselected.
</li></li></li></ul>
Clients may listen for all of the above events on the tab bar itself, and
refer to the event target to identify the tab that dispatched the event.
When an unselected tab is clicked for the first time, it dispatches both a
<code>SELECT</code> event and an <code>ACTION</code> event; subsequent clicks on an
already selected tab only result in <code>ACTION</code> events.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_TabBarRenderer.html">
          goog.ui.TabBarRenderer</a><br/>
        <div class="class-details">Default renderer for goog.ui.TabBars, based on the <code>TabPane</code>
code.  The tab bar&amp;#39;s DOM structure is determined by its orientation and
location relative to tab contents.  For example, a horizontal tab bar
located above tab contents looks like this:
<pre class="lang-js prettyprint">
<div class="goog-tab-bar goog-tab-bar-horizontal goog-tab-bar-top">
...(tabs here)...
</div>
</pre></div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_TabPane.html">
          goog.ui.TabPane</a><br/>
        <div class="class-details">TabPane widget. All children already inside the tab pane container element
will be be converted to tabs. Each tab is represented by a goog.ui.TabPane.
TabPage object. Further pages can be constructed either from an existing
container or created from scratch.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_TabPaneEvent.html">
          goog.ui.TabPaneEvent</a><br/>
        <div class="class-details">Object representing a tab pane page changed event.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_TabRenderer.html">
          goog.ui.TabRenderer</a><br/>
        <div class="class-details">Default renderer for goog.ui.Tabs, based on the <code>TabPane</code> code.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_TableSorter.html">
          goog.ui.TableSorter</a><br/>
        <div class="class-details">A table sorter allows for sorting of a table by column.  This component can
be used to decorate an already existing TABLE element with sorting
features.

The TABLE should use a THEAD containing TH elements for the table column
headers.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Textarea.html">
          goog.ui.Textarea</a><br/>
        <div class="class-details">A textarea control to handle growing/shrinking with textarea.value.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_TextareaRenderer.html">
          goog.ui.TextareaRenderer</a><br/>
        <div class="class-details">Renderer for goog.ui.Textareas.  Renders and decorates native HTML
textarea elements.  Since native HTML textareas have built-in support for
many features, overrides many expensive (and redundant) superclass methods to
be no-ops.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ToggleButton.html">
          goog.ui.ToggleButton</a><br/>
        <div class="class-details">A toggle button, with checkbox-like semantics.  Rendered using
goog.ui.CustomButtonRenderer by default, though any
goog.ui.ButtonRenderer would work.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Toolbar.html">
          goog.ui.Toolbar</a><br/>
        <div class="class-details">A toolbar class, implemented as a goog.ui.Container that defaults to
having a horizontal orientation and goog.ui.ToolbarRenderer as its
renderer.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ToolbarButton.html">
          goog.ui.ToolbarButton</a><br/>
        <div class="class-details">A button control for a toolbar.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ToolbarButtonRenderer.html">
          goog.ui.ToolbarButtonRenderer</a><br/>
        <div class="class-details">Toolbar-specific renderer for goog.ui.Buttons, based on goog.ui.CustomButtonRenderer.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ToolbarColorMenuButton.html">
          goog.ui.ToolbarColorMenuButton</a><br/>
        <div class="class-details">A color menu button control for a toolbar.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ToolbarColorMenuButtonRenderer.html">
          goog.ui.ToolbarColorMenuButtonRenderer</a><br/>
        <div class="class-details">Toolbar-style renderer for goog.ui.ColorMenuButtons.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ToolbarMenuButton.html">
          goog.ui.ToolbarMenuButton</a><br/>
        <div class="class-details">A menu button control for a toolbar.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ToolbarMenuButtonRenderer.html">
          goog.ui.ToolbarMenuButtonRenderer</a><br/>
        <div class="class-details">Toolbar-specific renderer for goog.ui.MenuButtons, based on goog.ui.MenuButtonRenderer.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ToolbarRenderer.html">
          goog.ui.ToolbarRenderer</a><br/>
        <div class="class-details">Default renderer for goog.ui.Toolbars, based on goog.ui.ContainerRenderer.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ToolbarSelect.html">
          goog.ui.ToolbarSelect</a><br/>
        <div class="class-details">A select control for a toolbar.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ToolbarSeparator.html">
          goog.ui.ToolbarSeparator</a><br/>
        <div class="class-details">A separator control for a toolbar.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ToolbarSeparatorRenderer.html">
          goog.ui.ToolbarSeparatorRenderer</a><br/>
        <div class="class-details">Renderer for toolbar separators.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ToolbarToggleButton.html">
          goog.ui.ToolbarToggleButton</a><br/>
        <div class="class-details">A toggle button control for a toolbar.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Tooltip.html">
          goog.ui.Tooltip</a><br/>
        <div class="class-details">Tooltip widget. Can be attached to one or more elements and is shown, with a
slight delay, when the the cursor is over the element or the element gains
focus.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_TriStateMenuItem.html">
          goog.ui.TriStateMenuItem</a><br/>
        <div class="class-details">Class representing a three state checkbox menu item.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_TriStateMenuItemRenderer.html">
          goog.ui.TriStateMenuItemRenderer</a><br/>
        <div class="class-details">Default renderer for goog.ui.TriStateMenuItemRenderers. Each item has
the following structure:
<div class="goog-tristatemenuitem">
<div class="goog-tristatemenuitem-checkbox"></div>
<div>...(content)...</div>
</div></div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_TwoThumbSlider.html">
          goog.ui.TwoThumbSlider</a><br/>
        <div class="class-details">This creates a TwoThumbSlider object.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_Zippy.html">
          goog.ui.Zippy</a><br/>
        <div class="class-details">Zippy widget. Expandable/collapsible container, clicking the header toggles
the visibility of the content.</div>
 </div>
 <div class="fn-constructor">
        <a href="class_goog_ui_ZippyEvent.html">
          goog.ui.ZippyEvent</a><br/>
        <div class="class-details">Object representing a zippy toggle event.</div>
 </div>
   
<br/>

  <div class="legend">
        <span class="key publickey"></span><span>Public</span>
        <span class="key protectedkey"></span><span>Protected</span>
        <span class="key privatekey"></span><span>Private</span>
  </div>



<h2>Enumerations</h2>






<div class="section">
  <table class="horiz-rule">


     <tr class="even entry public">
       <td class="access"></td>





  <a name="goog.ui.ButtonSide"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.</span><span class="entryName">ButtonSide</span>
        : 
     </div>


     <div class="entryOverview">
       Constants for button sides, see goog.ui.Button.prototype.setCollapsed
for details.
     </div>

     <div class="entryDetails">
       <div class="detailsSection">
          <b>Constants:</b>
          <table class="horiz-rule">
            <tbody>
              <tr><td>
                <span class="entryName">
                  END
                </span>
                <div class="entryOverview">
                  Right for LTR, left for RTL.
                </div>
             </td></tr>
              <tr><td>
                <span class="entryName">
                  NONE
                </span>
                <div class="entryOverview">
                  Neither side.
                </div>
             </td></tr>
              <tr><td>
                <span class="entryName">
                  BOTH
                </span>
                <div class="entryOverview">
                  Both sides.
                </div>
             </td></tr>
              <tr><td>
                <span class="entryName">
                  START
                </span>
                <div class="entryOverview">
                  Left for LTR, right for RTL.
                </div>
             </td></tr>
           </tbody>
         </table>
       </div>
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_ui_buttonside.js.source.html#line30">Code &raquo;</a>
  </td>
     </tr>


  </table>
</div>




  <h2>Global Functions</h2>





<div class="section">
  <table class="horiz-rule">


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.ui.decorate"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.</span><span class="entryName">decorate<span class="args">(<span class="arg">element</span>)</span>
        </span>
        &#8658; <div class="fullType">(<span class="type"><a href="class_goog_ui_Component.html">goog.ui.Component</a></span><span>&nbsp;|&nbsp;</span><span class="type">null</span>)</div>
      </div>


     <div class="entryOverview">
       Decorates the element with a suitable goog.ui.Component instance, if
a matching decorator is found.
     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">element</span>
        : <div class="fullType">(<span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span><span>&nbsp;|&nbsp;</span><span class="type">null</span>)</div>
        <div class="entryOverview">Element to decorate.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<div class="fullType">(<span class="type"><a href="class_goog_ui_Component.html">goog.ui.Component</a></span><span>&nbsp;|&nbsp;</span><span class="type">null</span>)</div>&nbsp;
            New component instance, decorating the element.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="closure_goog_ui_decorate.js.source.html#line32">code &raquo;</a>
  </td>
     </tr>


  </table>
</div>



  <h2>Global Properties</h2>





<div class="section">
  <table class="horiz-rule">


     <tr class="even entry public">
       <td class="access"></td>





  <a name="goog.ui.INLINE_BLOCK_CLASSNAME"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.</span><span class="entryName">INLINE_BLOCK_CLASSNAME</span>
        : <div class="fullType"><span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span></div>
     </div>


     <div class="entryOverview">
       CSS class name for applying the "display: inline-block" property in a
cross-browser way.
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_ui_cssnames.js.source.html#line29">Code &raquo;</a>
  </td>
     </tr>


  </table>
</div>
      <!-- Column 1 end -->
    </div>

        <div class="col2">
          <!-- Column 2 start -->
          <div class="col2-c">
            <h2 id="ref-head">Package ui</h2>
            <div id="localView"></div>
          </div>

          <div class="col2-c">
            <h2 id="ref-head">Package Reference</h2>
            <div id="sideTypeIndex" rootPath="" current="ui"></div>
          </div>
          <!-- Column 2 end -->
        </div>
</div>
</div>

</body>
</html>
